<template>
  <div class="NewsList">
    <van-card v-for="item in newsList" :key="item.id"
              :title="item.title"
              :thumb="item.img_url"
              @click="goDetail('/home/newsinfo',item.id)">
      <p class="newsTitle" slot="title">{{item.title}}</p>
      <template #price class="add_time">
        {{item.add_time}}
      </template>
      <template #num>
        点击量:{{item.click}}
      </template>
    </van-card>
  </div>
</template>

<script>
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8888'
export default {
  name: 'index',
  data: () => ({
    newsList: []
  }),
  created () {
    this.getInit()
  },
  methods: {
    async getInit () {
      const { message } = await this.$http.getNewsList()
      this.newsList = message
    }
  }
}
</script>

<style lang="scss" scoped>
  .NewsList {
    margin-top: 20px;

    .van-card__thumb {
      height: 70px;
    }

    .van-card__content {
      min-height: 70px;

      .newsTitle {
        margin: 0;
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 350px;
      }

      .van-card__price {
        font-size: 14px;
        color: red;
      }
    }
  }
</style>
